<template>
  <div>
    <!-- 搜索 -->
    <HeadSeach ref="headSeach" />
    <div class="app-content">
      <div class="operation">
        <el-button type="primary" class="ml-10" icon="el-icon-plus" size="mini" @click="add">新增</el-button>
        <el-dropdown size="mini" class="ml-10" @command="commandBatch">
          <el-button size="mini">批量操作<i class="el-icon-arrow-down el-icon--right" /></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item divided command="enable">启用</el-dropdown-item>
            <el-dropdown-item divided command="stop">禁用</el-dropdown-item>
            <el-dropdown-item divided command="del"><p class="col-stagnation">删除</p></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button type="primary" class="bindingGoods ml-10" plain size="mini" @click="bindingGoods()">仓位绑定商品</el-button>
        <Content>
          <el-table :data="list.data" style="width: 100%" size="small" row-key="id" @selection-change="selectionChange">
            <el-table-column type="selection" min-width="30" />
            <el-table-column label="仓位" min-width="50" prop="position_sn" />
            <el-table-column label="仓位状态" min-width="30">
              <template slot-scope="scope">
                <div v-if="scope.row.status === 1" class="primary_row row_div">启用</div>
                <div v-if="scope.row.status === 0" class="danger_row">禁用</div>
              </template>
            </el-table-column>
            <el-table-column label="散货区" min-width="30" header-align="center" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.is_disperse" @change="changeDisperse($event,scope.row.id)" />
              </template>
            </el-table-column>
            <el-table-column label="商品编码" min-width="200" prop="sku_codes">
              <template slot-scope="scope">
                <el-link type="primary" :underline="false" @click="bindingGoods(scope.row.id,scope.row.sku_codes)">{{ scope.row.sku_codes }}</el-link>
              </template>
            </el-table-column>
            <el-table-column label="仓位编码" min-width="100" prop="position_code" />
            <el-table-column label="仓位置放" min-width="50" prop="type" />
            <el-table-column label="仓库" min-width="50" />
            <el-table-column label="仓位热度" min-width="50">
              <template slot-scope="scope">
                <label v-if="scope.row.position_hot === 1" class="col-stagnation">滞销</label>
                <label v-if="scope.row.position_hot === 2" class="col-flat">平销</label>
                <label v-if="scope.row.position_hot === 3" class="col-heat">热销</label>
              </template>
            </el-table-column>
            <el-table-column label="备注" min-width="50" prop="desc" />
            <el-table-column label="操作" min-width="50">
              <template slot-scope="scope">
                <el-link type="danger" :underline="false" @click="delValue(scope.row.id)"><i class="el-icon-delete" /> 删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <Pagination ref="pagination" />
        </Content>
      </div>
    </div>

    <!-- 新增 -->
    <el-drawer title="新增仓位" :visible.sync="dialogAdminVisible" direction="rtl" class="darwer">
      <div class="dis-flex darwer-add flex-y-center">
        <i class="el-icon-info info" />
        <p>区域两个字符，行列层格均为中划线分割的起止符，支持纯数字与单字母，层格可不填</p>
      </div>

      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>仓库</label>
        <div class="flex-box">
          <el-select v-model="param.storage_sn" placeholder="仓库" size="small" filterable>
            <el-option value="" label="请选择仓库" />
            <el-option v-for="(item, index) in listStorage" :key="index" :label="item.storage_name" :value="item.storage_sn" />
          </el-select>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>区</label>
        <div class="flex-box">
          <el-input v-model="param.erea" placeholder="请输入内容" size="small" />
          <div class="message">
            <i class="el-icon-info " />
            <span>字母或数字组合(1-2位) 例：A A1 1 11</span>
          </div>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>行</label>
        <div class="flex-box">
          <el-input v-model="param.row" placeholder="请输入内容" size="small" />
          <div class="message">
            <i class="el-icon-info " />
            <span>3位内正整数 例：1 99 999</span>
          </div>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label><i class="required">*</i>列</label>
        <div class="flex-box">
          <el-input v-model="param.column" placeholder="请输入内容" size="small" />
          <div class="message">
            <i class="el-icon-info " />
            <span>3位内正整数 例：1 99 999</span>
          </div>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>层</label>
        <div class="flex-box">
          <el-input v-model="param.tier" placeholder="请输入内容" size="small" />
          <div class="message">
            <i class="el-icon-info " />
            <span>2位内正整数 例：1 99</span>
          </div>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>格</label>
        <div class="flex-box">
          <el-input v-model="param.grid" placeholder="请输入内容" size="small" />
          <div class="message">
            <i class="el-icon-info " />
            <span>2位内正整数 例：1 99</span>
          </div>
        </div>
      </div>
      <div class="dis-flex darwer-area">
        <label>描述</label>
        <div class="flex-box">
          <el-input v-model="param.desc" placeholder="请输入内容" size="small" />
        </div>
      </div>
      <div class="storage_operation">
        <el-button size="mini" @click="dialogAdminVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="determine()">保存</el-button>
      </div>
    </el-drawer>
    <!-- 绑定商品弹框 -->
    <Goods ref="goods" @getList="getList" />
  </div>
</template>
<script>
import { Storage } from '@/api/storage/storage'
import { StoragePosition } from '@/api/storage/storagePosition'
import { deleteValue } from '@/utils/public'
import Pagination from '@/components/Pagination'
import Goods from './components/goods'
import HeadSeach from '@/components/HeadSeach'
export default {
  name: 'PositionList',
  components: {
    Pagination,
    Goods,
    HeadSeach
  },
  data() {
    return {
      seach: {},
      list: {
        data: []
      },
      dialogAdminVisible: false,
      param: {},
      listStorage: [],
      selectId: [],
      pagination: {
        page: 1,
        per_page: 30
      },
      position_sn: [] // 仓位
    }
  },
  created() {
    this.$set(this.seach, 'storage_sn', this.$route.query.storage_sn)
    this.getList()
  },
  mounted() {
    this.assembleSeachData()
  },
  methods: {
    // 组装搜索数据
    async assembleSeachData() {
      this.listStorage = await Storage.listStorage().then((res) => { return res.data }).catch(() => {})
      const searchData = {
        label: '仓位搜索',
        size: 'small',
        model: {
          storage_sn: this.$route.query.storage_sn,
          status: '',
          position_hot: '',
          sku_codes: '',
          position_sn: ''
        },
        options: [
          {
            tag: 'Select',
            prop: 'storage_sn',
            placeholder: '仓库',
            data: this.listStorage,
            showPropData: {
              label: 'storage_name',
              value: 'storage_sn'
            }
          },
          {
            tag: 'Select',
            prop: 'status',
            placeholder: '仓位状态',
            data: [{ label: '启用', value: '1' }, { label: '禁用', value: '0' }],
            showPropData: {
              label: 'label',
              value: 'value'
            }
          },
          {
            tag: 'Select',
            prop: 'position_hot',
            placeholder: '仓位热度',
            data: [{ label: '滞销', value: '1' }, { label: '平销', value: '2' }, { label: '热销', value: '3' }],
            showPropData: {
              label: 'storage_name',
              value: 'storage_sn'
            }
          },
          {
            tag: 'Input',
            prop: 'sku_codes',
            placeholder: '包含的商品编码'
          },
          {
            tag: 'Input',
            prop: 'position_sn',
            placeholder: '仓位'
          }
        ],
        cb: (data) => {
          this.seach = data
          this.pagination.page = 1
          this.getList()
        }
      }
      this.$refs.headSeach.init(searchData)
    },
    // 选择
    selectionChange(selection) {
      this.selectId = selection.map(val => val.id)
      this.position_sn = selection.map(val => val.position_sn)
    },
    // 新增
    add() {
      this.param = {}
      this.dialogAdminVisible = true
    },
    // 删除
    delValue(id) {
      deleteValue({
        _this: this,
        success: (res) => {
          StoragePosition.delStoragePosition({ id }).then((res) => {
            this.$message.success('删除成功')
            this.getList()
          }).catch(() => {})
        }
      })
    },
    // 批量操作
    commandBatch(command) {
      switch (command) {
        case 'del':
          if (this.selectId.length === 0) {
            this.$message.error('请先选择后在进行操作！')
            return false
          }
          this.delValue(this.selectId.join(','))
          break
        case 'enable':
        case 'stop':
          this.determine({
            id: this.selectId.join(','),
            status: command === 'enable' ? 1 : 0
          })
          break
      }
    },
    // 改变散货
    changeDisperse(e, id) {
      this.determine({
        id: id,
        is_disperse: e ? 1 : 0
      })
    },
    // 绑定商品
    bindingGoods(id, sku_code) {
      this.$refs.goods.show({ id: [id] || this.selectId, position_sn: this.position_sn, sku_code })
    },
    // 获取仓位列表
    getList() {
      StoragePosition.pageStoragePosition({ ...this.pagination, ...this.seach }).then((res) => {
        res.data.data.forEach(ele => {
          ele.is_disperse = ele.is_disperse !== 0
        })
        this.list = res.data
        this.initPagination({
          page: res.data.current_page,
          total: res.data.total,
          per_page: res.data.per_page
        })
      }).catch(() => {})
    },
    // 分页
    initPagination(data) {
      this.$refs.pagination.init({ ...data, cb: (res) => {
        this.pagination = res
        this.getList()
      }
      })
    },
    determine(param) {
      StoragePosition.addStoragePosition(param || this.param).then((res) => {
        this.$message.success('保存成功')
        this.dialogAdminVisible = false
        this.getList()
      }).catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>

.darwer{
  ::v-deep .el-drawer__header{
  margin-bottom: 10px;
  padding: 15px;
  border-bottom: 1px solid #F0F0F0;
  font-weight: 600;
}
::v-deep :focus {
  outline: 0;
}
  .darwer-add{
    background: #EDF5FF;
    border: 1px solid #97C3FF;
    font-size: 12px;
    color: #666666;
    margin: 0 16px;
    padding:5px 0 5px  15px;
    border-radius: 6px;
    .info{
      color: #0091FF;
      font-size: 16px;
      margin-right: 10px;
    }
  }
  .darwer-area{
    margin-top: 20px;
    font-size: 12px;
    label{
      margin: 10px 30px 0 60px;
      min-width:30px;
      text-align: right;
    }
    .flex-box{
      flex: 1;
      margin-right: 100px;
        .message{
        border-radius: 4px;
        color: #FAAD14;
        background: #FFFAEB;
        padding: 10px;
        margin-top: 10px;
        span{
          margin-left: 5px;
        }
      }
    }

  }
  .storage_operation{
    position: absolute;
    right:20px;
    bottom: 20px;
  }
}
.col-heat{
  color: #2DC4A2;
}
.col-flat{
  color: #0091FF;
}
.col-stagnation{
  color: #E02020;
}
p{
  margin: 0;
}
.bindingGoods{
  background: white;
}

</style>
